<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title> report </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
    <?php htmlhead(); ?>
    <style>
      <!--
      .panel .t {text-indent:4px;background:#d7e7ee url(themes/images/icons.gif) scroll repeat 10px -32px;}      
      .panel b {cursor:pointer;font-size:14px;}
      .panel .m {width:100px;height:20px;line-height:19px;text-indent:5px;display:block;float:left;margin-top:1px;border:1px solid #efe;margin-right:4px;background:#000;}
      .panel .m em {width:9px;height:9px;display:block;background:transparent url(themes/default/images/close.gif);float:right;margin-top:5px;margin-right:5px;font-size:10px;color:#fff;cursor:pointer;}
      .panel .mm {width:84px;font-weight:bold;vertical-align:center;text-align:right;}
      #bg {display:none;z-index:10;background:#eee;filter:alpha(opacity=80);left:0px;width:100%; position:absolute;top:0px;opacity:0.8;}
      .opendiv {display:none;border:#000 1px solid;z-index:20;background:#fff;overflow:hidden;width:512px;position:absolute; top:0px;}
      .tit {padding-left:10px; margin:1px;line-height:20px;height:20px;background:#353d3f;color:#fff;cursor: move;}
      .pointer {cursor:pointer;margin-right:12px;}
      -->
    </style>
  </head>
  
  <body>

    <form method="post" action="?act=report_add" name="myform" id="myform" class="myform">
      <input type="hidden" name="version" value="<?php echo $report['version'];?>" />
      <input type="hidden" name="addon" value="<?php echo $report['addon'];?>" />
      <input type="hidden" name="datas" id="datas" value="" />
      <div class="panel" id="accordion">      
        <div class="t"><b title="点击可展开收缩">基本信息</b></div>
        <div>
        <dl>
          <dt>DKP类型:</dt>
          <dd>
            <select name="type_id">
              <?php treeSelect($dkptypes); ?>
            </select>
          </dd>
        </dl>
        <dl>
          <dt>副本名称:</dt>
          <dd>
            <input type="text" id="instance_name" name="instance_name" value="<?php echo $report['instance'];?>" />
          </dd>
        </dl>
        <dl>
          <dt>活动标题:</dt>
          <dd><input type="text" name="event_name" value="<?php echo $report['name'];?>" /></dd>
        </dl>
        <dl>
          <dt>开始时间:</dt>
          <dd><input type="text" name="event_start" value="<?php echo date("Y-m-d H:i:s",$report['start']);?>" /></dd>
        </dl>
        <dl>
          <dt>结束时间:</dt>
          <dd><input type="text" name="event_end" value="<?php echo date("Y-m-d H:i:s",$report['end']);?>" /></dd>
        </dl>
        <dl>
          <dt>活动备注:</dt>
          <dd><input type="text" name="event_note" value="<?php echo $report['note'];?>" /></dd>
        </dl>
        </div>
        
        <div class="t"><b title="点击可展开收缩">参与人数[<span id="num_m"><?php echo count($report['members']);?></span>]</b> <a href="#" onclick="openDiv('member_add');" class="blue normal">添加</a></div>
        <div id="members">
        <table class="table">
          <tbody>
          <?php
          foreach($classes as $_=>$v) {
            echo('<tr style="'.($v['class_color'] ? 'color:'.$v['class_color'] : '').'">');
            echo('<td class="mm">'.$v['class_name'] . ': </td><td id="cc'.$v['class_id'].'" >');
            foreach($report['members'] as $_i=>$vv) {
              if($v['class_name']==$vv[2] || $v['class_en']==$vv[2]) {
                echo('<span class="m" id="n'.$_i.'">'.$vv[0].'<em></em></span>');
              }
            }
            echo('</td></tr>');
          }
          ?>
          </tbody>
        </table>
        </div>
        
        <div class="t"><b title="点击可展开收缩">相关事件[<span id="num_e"><?php echo count($report['events']);?></span>]</b> <a href="#" onclick="" class="blue normal">添加</a></div>
        <div id="events">
        <table class="table" id="events">
          <thead>
            <tr>
              <th style="width:20px;"></th>
              <th style="width:300px;">事件名称</th>
              <th style="width:36px;">分数</th>
              <th style="width:120px;">时间</th>
              <th style="width:160px;">相关BOSS</th>
              <th style="width:auto;">参与情况</th>
            </tr>        
          </thead>
          <tbody>
          <?php
          foreach($report['events'] as $_=>$v) {
            echo('<tr id="e'.$_.'">');
            echo('<td class="status"></td>');
            echo('<td><strong class="green">'.$v[0] . '</strong></td>');
            echo('<td>'.$v[1] . '</td>');
            echo('<td>'.date("Y-m-d H:i:s",$v[3]) . '</td>');
            echo('<td>'. $v[2] . '</td>');
            echo('<td><a href="#">[参与者]</a></td>');
            echo('</tr>');
          }
          ?>
          </tbody>
        </table>        
        </div>
        
        <div class="t"><b title="点击可展开收缩">物品拾取[<span id="num_i"><?php echo count($report['items']);?></span>]</b> <a href="#" onclick="" class="blue normal">添加</a></div>
        <div id="items">
        <table class="table" id="items">
          <thead>
            <tr>
              <th style="width:20px;"></th>
              <th style="width:300px;">物品名称</th>
              <th style="width:40px;">数量</th>
              <th style="width:128px;">拾取者</th>
              <th style="width:60px;">单价</th>
              <th style="width:auto;"></th>
            </tr>        
          </thead>
          <tbody>
          <?php
          foreach($report['items'] as $_=>$v) {
            list($color,$itemid,$itemname) = explode("|",$v[0]);
            echo('<tr id="i'.$_.'">');
            echo('<td class="status"></td>');
            echo('<td><strong style="color:#'.$color.';">['. $itemname . ']</strong></td>');
            echo('<td>'.$v[2] . '</td>');
            echo('<td>'. $v[3] . '</td>');
            echo('<td>'. $v[1] . '</td>');
            echo('<td></td>');
            echo('</tr>');
          }
          ?>
          </tbody>
        </table>        
        </div>
        
      </div>
      <input type="button" value="OK" style="width:100px;height:36px;" onclick="gosubmit();" />
    </form>

    <div id="bg"></div>
    
    <div class="opendiv" id="member_add">
      <div class="tit">
        <h3 class="floatl">添加参与者</h3>
        <span class="pointer floatr" onclick="closeDiv('member_add');">X</span>
      </div>
      <div class="panel">
      <dl>
        <dt>种族</dt>
        <dd>
          <select id="add_race" name="add_race">
            <?php
            foreach($races as $_=>$v) {
              echo('<option value="'.$v['race_id'].'">'.$v['race_name'].'</option>');
            }
            ?>
          </select>
        </dd>
      </dl>
      <dl>
        <dt>职业</dt>
        <dd>
          <select id="add_class" name="add_class">
            <?php
            foreach($classes as $_=>$v) {
              echo('<option value="'.$v['class_id'].'">'.$v['class_name'].'</option>');
            }
            ?>
          </select>
        </dd>
      </dl>
      <dl>
        <dt>名称</dt>
        <dd><input type="text" id="add_member" name="add_member" value="" /></dd>
      </dl>
      <dl><dt></dt>
        <dd><input type="button" value="确定" class="btn" onclick="member_add_click();" /></dd>
      </dl>
      </div>
    </div>
    
    <script>
      //解析后的活动json数据
      var data = <?php echo json_encode($report);?>;
      //种族
      var races = new Array();
      <?php
      foreach($races as $_=>$v) {
        echo('races['.$_.']="'.$v['race_name'].'";');
      }
      ?>
      //职业
      var classes = new Array();
      <?php
      foreach($classes as $_=>$v) {
        echo('races['.$_.']="'.$v['class_name'].'";');
      }
      ?>
      
      //副本自动填充
      var instance_names = [<?php echo splitarray($instances,'instance_name');?>];      
      $('#instance_name').autocomplete(instance_names,{ minChars: 0 });
      
      //鼠标滑过提示
      $('#accordion [title]').tipsy({gravity:'w'});
      
      //圆角处理
      $('.panel .m').corner('6px');
      
      //收缩展开
      $('#accordion b').click(function() {
        $(this).parent().next().toggle('fast');
        return false;
      });
      
      $('#accordion .t a').click(function() {
        return false;
      });
      
      //鼠标滑过变色
      $(".table tr").hover(function() {
        if ($(this).hasClass('trhover'))
          $(this).removeClass('trhover');
        else
          $(this).addClass('trhover');          
      });
      
      //选择
      $(".table .status").click(function(){
        if ($(this).hasClass('ck')) {
          $(this).removeClass('ck');
          //$(this).parent().removeClass('trselected');
        } else {
          $(this).addClass('ck');
          //$(this).parent().addClass('trselected');
        }
      });      
      $(".table .status").addClass('ck');
      
      //参与玩家
      $('.panel .m em').click(function(){
        var n = $(this).parent().text();
        var r = confirm('确定删除 ['+n+'] ?');
        if(r) {
          id = $(this).parent().attr('id').substring(1);
          $(this).parent().remove();
          data.members[id] = [];
          $('#num_m').text($('#num_m').text()-1);
        }
      });
      
      //获得选中的行id
      function getIDS(div) {
        var ids = '';
        $('#'+div+' .ck').each(function(){
          ids += $(this).parent().attr('id') + ',';
        });
        return ids.replace(/,$/,"");
      }
      
      function openBg(state){
        if(state == 1){
          $("#bg").css("display","block");
          var h = document.body.offsetHeight > document.documentElement.offsetHeight ? document.body.offsetHeight : document.documentElement.offsetHeight;
          $("#bg").height(h);
        }
        else  {
          $("#bg").css("display","none");
        }
      }
      
      function openDiv(div) {
        var t = ($(document).height()-$("#"+div).height())/2;
        var l = ($(document).width()-$("#"+div).width())/2;
        $("#"+div).css("display","block");
        $("#"+div).css("top",  ($(document).scrollTop() + 80) +"px");
        $("#"+div).css("left", 120+"px");
        openBg(1); 
        return false;
      }
      
      function closeDiv(div) {
        $("#"+div).css("display","none");
        openBg(0);
      }
      
      function ucfirst(str){
        var p = /\b(\w)|\s(\w)/g;
        str = str.toLowerCase(); 
        return str.replace(p,function(m){return m.toUpperCase()}); 
      }
 
      function member_add_click() {
        var r = $('#add_race option:selected').val();
        var c = $('#add_class option:selected').val();
        var n = ucfirst($('#add_member').val());       
        var id = data.members.length + 1;
        data.members[id] = [n,races[r],classes[c],80];        
        $('#cc'+c).append("<span class='m' id='n"+ id +"'>"+n+"<em></em></span>");
        $('#num_m').text(parseInt($('#num_m').text())+1);
        $('#n'+id).corner('6px');
        $('#n'+id+' em').click(function(){
          var n = $(this).parent().text();
          var r = confirm('确定删除 ['+n+'] ?');
          if(r) {
            id = $(this).parent().attr('id').substring(1);
            $(this).parent().remove();
            data.members[id] = [];
            $('#num_m').text($('#num_m').text()-1);
          }
        });        
        closeDiv('member_add');
        return false;
      }
      
      function gosubmit() {
        $('#datas').val(toJsonString(data));
        $('#myform').submit();
      }
      
      <?php echo getTips(); ?>

    </script>
    
</body>
</html>